  <!-- 星星 -->
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
  </head>
  <style>
    body {
      background-color: black;
    }
    div {
        border: 1px solid white;
        width:200px;
        height: 30px;
    }
    div .xt{
        
        height: 30px;
        background-color: tomato;
        border:0
    }
  </style>
  <body>
    <div>
        <div class="xt"></div>
        <button>重新开始</button>
    </div>
  </body>
  <script>
    // 消除成功加血
   

   
    var bodyObj = document.body
    bodyObj.onclick = function(evt) {
    var e = evt || window.event
    var target = e.target || e.srcElement
    if (target.nodeName === 'IMG')
    {
      num+=10
        bodyObj.removeChild(target)
    }
}


    // 随机星星
    var t1=setInterval(function(){
     var imgObj=document.createElement("img")
     imgObj.src="./star.gif"
    var max=100
    var min=20
    imgObj.width=Math.floor(Math.random()*(max-min+1)+min)
    imgObj.style.position="absolute"
    var min=0
    var max=(window.innerWidth || document.documentElement.clientWidth)-imgObj.width
      imgObj.style.left=Math.floor(Math.random()*(max-min+1)+min)+"px"
    var max=(window.innerHeight || document.documentElement.clientHeight)-imgObj.width
      imgObj.style.top=Math.floor(Math.random()*(max-min+1)+min)+"px"
    document.body.appendChild(imgObj)
    
    
  
    },1000)

    // 血条
    var num=200
    var t2=setInterval(function(){
      if (num<0){
        alert("游戏结束")
        clearInterval(t1)
        clearInterval(t2)
      }
      document.querySelector(".xt").style.width=num+"px"
      num-=1
    },100)

    // 重新开始
    var start=document.querySelector("button")
    start.onclick
    
 
  
  </script>
  </html>